<template>
    <div id="wrapper" class="container">
        <el-row>
            <div class="d-flex align-items-center page-title-holder">
                <div>
                    <h3 class="page-title">我的主项目</h3>
                </div>
                <div class="page-title-controls">
                    <el-button
                        icon="el-icon-plus"
                        type="primary"
                        plain
                        @click="dialogFormVisible = true"
                        >创建主项目</el-button
                    >
                </div>
            </div>
        </el-row>
        <el-row>
            <el-table :data="projectData" style="width: 100%">
                <el-table-column prop="name" label="主项目名" min-width="180">
                    <template slot-scope="scope">
                        <router-link
                            :to="{
                                name: 'parentProject',
                                params: { id: scope.row.id }
                            }"
                            >{{ scope.row.name }}
                        </router-link>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="create_date"
                    label="创建日期"
                    min-width="180"
                >
                </el-table-column>
            </el-table>
        </el-row>
        <el-dialog title="新建主项目" :visible.sync="dialogFormVisible">
            <el-form :model="form">
                <el-form-item label="项目名" label-width="120px">
                    <el-input v-model="form.name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="概要" label-width="120px">
                    <el-input
                        type="textarea"
                        :rows="2"
                        placeholder="请输入内容"
                        v-model="form.summary"
                    >
                    </el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="createProject"
                    >提 交</el-button
                >
            </div>
        </el-dialog>
    </div>
</template>

<style>
.container {
    padding: 0 16px;
}

.container h3 {
    font-weight: 400;
}

.page-title-holder {
    border-bottom: 1px solid #dbdbdb;
}

.d-flex {
    display: flex !important;
}

.align-items-center {
    align-items: center !important;
}

.page-title {
    margin: 16px 0;
    font-weight: 600;
    color: #303030;
}

.page-title-controls {
    margin-left: auto;
}
</style>

<script>
import { getName } from '@/utils/auth';

export default {
    data() {
        return {
            dialogFormVisible: false,
            projectData: [],
            form: {},
            userInfo: {
                id: null
            }
        };
    },
    methods: {
        getUserInfo() {
            return new Promise((resolve, reject) => {
                this.$axios
                    .get(
                        `${
                            process.env.VUE_APP_PROJECT_REQUEST_HOST
                        }/api/base/employee/`,
                        {
                            params: {
                                ldap: getName()
                            }
                        }
                    )
                    .then(response => {
                        this.userInfo = response.data.data[0];
                        resolve(response);
                    })
                    .catch(err => {
                        reject(err);
                    });
            });
        },
        fetchProject(userId) {
            this.$axios
                .get(
                    `${
                        process.env.VUE_APP_PROJECT_REQUEST_HOST
                    }/api/base/parent_project/`,
                    {
                        params: {
                            create_by: userId,
                            ordering: '-create_date'
                        }
                    }
                )
                .then(response => {
                    this.projectData = response.data;
                });
        },
        createProject() {
            this.$axios
                .post(
                    `${
                        process.env.VUE_APP_PROJECT_REQUEST_HOST
                    }/api/base/parent_project/`,
                    {
                        name: this.form.name,
                        summary: this.form.summary,
                        create_by: this.userInfo.id
                    }
                )
                .then(response => {
                    if (response.status === 201) {
                        this.form.name = '';
                        this.form.summary = '';
                        this.dialogFormVisible = false;
                        this.fetchProject(this.userInfo.id);
                    }
                })
                .catch(err => {
                    if (err.response.status === 400) {
                        this.$message.error('项目已存在，请使用其它项目名');
                    } else {
                        this.$message.error('未知异常，请联系管理员');
                    }
                });
        }
    },
    created() {
        this.getUserInfo().then(res => {
            this.fetchProject(res.data.data[0].id);
        });
    }
};
</script>
